@import '@/styles/index.scss';

.container {
  background-color: $bgc;

  .friends-page {
    width: 100%;
    padding: 160rpx 0;

    .search {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: $pd $pd 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      border-bottom: 2rpx solid $bdc;

      .box {
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid $fc-on;

        .icon {
          width: 60rpx;
          height: 60rpx;

          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .content {
          flex: 1;
          padding-left: 20rpx;

          input {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .btn {
          padding: 0 20rpx;
          line-height: 60rpx;
          cursor: pointer;
        }
      }
    }

    .body {

      .list {
        border-top: 2rpx solid $bdc;

        .item {
          display: flex;
          align-items: center;
          padding: 20rpx $pd;
          border-bottom: 2rpx solid $bdc;
          background-color: #fff;

          .avatar {
            width: 120rpx;
            height: 120rpx;

            .image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .user {
            width: 200rpx;
            padding-left: $pd;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

            .nick {
              margin-bottom: 10rpx;
            }

            .job {
              color: $fc-t;
              font-size: $fss;
            }
          }

          .content {
            flex: 1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

            .icon {
              display: inline-block;
              vertical-align: top;
              width: 40rpx;
              height: 40rpx;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .text {
              display: inline-block;
              vertical-align: top;
            }
          }
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      border-top: 2rpx solid $bdc;

      .icon {
        width: 60rpx;
        height: 60rpx;

        .image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .content {
        flex: 1;
        padding-left: 20rpx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;

        .text {
          font-size: $fss;
          margin-top: 5rpx;
        }
      }

      .btn {
        padding: 16rpx 20rpx;
        background-color: $fc-on;
        color: #fff;
      }
    }
  }
}